import React, { memo, useEffect, useState } from 'react'
import { Box } from './ShoppingCartItem.style'

const ShoppingCartItem = (props) => {
	const {shoppingCartItem:data}=props
	const {changeOne}=props
	const [goodCount,setGoodCount]=useState(1)
	// const [data,setData]=useState({})

	// useEffect(()=>{
	// 	setData(shoppingCartItem)
	// },[])

	return (
		<Box>
			<input type="checkbox" value={data.id} className='checkbox' checked={data.checked} onChange={()=>{changeOne(data.id)}} />
			<div className="info">
				<div className="discount">
					<div className="discountname">{data.discountname}</div>
					<div className="state">{data.discountstate}</div>
				</div>
				<div className="container">
					<img src={data.imgSrc} alt="" />
					<div className='right'>
						<div className="goodsname">{data.title}</div>
						<div className="norms" onClick={()=>{}}>深蓝 175：22</div>
						<div className="parameter">
							<div className="price">￥{data.price}{data.isdiscount&&(<del>￥{data.notdiscountPrice}</del>)}</div>
							<div className="goodscount">
								<button disabled={goodCount>1 ? false :true} className={goodCount>1 ? "" :'disable'} onClick={()=>setGoodCount(goodCount-1)}>-</button>
								<input type="number" value={goodCount} readOnly />
								<button onClick={()=>setGoodCount(goodCount+1)}>+</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</Box>
	)
}

export default memo(ShoppingCartItem)

